<template>
  <div class="info-wrap">
    <div class="flex-center">
      <Title title="更多账号信息" style="margin:6px 0 8px 0" font-size="16px">
        <div v-if="showPickTime" class="pick-time"><img :src="timeIcon" alt="">最近采集时间：<span class="text">{{ detailInfo.moreAccountInfo.pickTime | format('YYYY/MM/DD HH:mm') }}</span></div>
      </Title>
      <editBtn v-if="hasRouteAuth('medium:dataEdit:moreAccount') && detailInfo.isEditAuth && isNewVersion" @handleClick="editModule"/>
    </div>
    <el-form
      :class="{'mobile-el-form': showMobilePage}"
      :label-position="showMobilePage?'left':'right'"
      label-width="110px"
      class="supplier-form height55">
      <el-row :gutter="20" :class="{'dividing': !showMobilePage}">
        <el-col v-for="field in fields" :span="8" :key="field.keyword" :class="{'label-collapse-global': field.labelCollapse && !field.noDetailCollapse}">
          <el-form-item :label="`${field.label}：`" style="margin-bottom: 0px;">
            <ToolTip
              v-if="field.type === 'number'"
              :content="getData(field) | numberTextFormat(2)"
              :tool-tip="getData(field) | moneyFilter" />
            <ToolTip v-else :content="getData(field)" />
          </el-form-item>
        </el-col>
        <!-- 自定义字段 -->
        <el-col v-for="(item,index) in handleField(detailInfo.moreAccountInfo.dynamicKey)" :span="8" :key="index">
          <el-form-item :prop="item.name" style="margin-bottom: 0px;">
            <el-tooltip slot="label" :content="`${item.name}：`" placement="top" effect="dark">
              <div class="item ellipsisOne">
                {{ `${item.name}：` }}
              </div>
            </el-tooltip>
            <ToolTip :content="item.value" placement="top"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import Title from '@/components/Title';
import { mapState } from 'vuex';
import mixins from './mixins';
import { numberTextFormat, moneyFilter } from '@/filters/number';
import { format } from '@/filters/date';
import { sexStatus } from '@/views/signUp/components/status';
import { PICK_PLATFORM } from '@/utils/const';
import timeIcon from '@/assets/cacheTime.png';
import { accountAllField } from '@/views/resource/create/resourceData';

export default {
  components: {
    Title
  },
  filters: { numberTextFormat, moneyFilter, sexStatus, format },
  mixins: [mixins],
  props: {
    detailInfo: {// 详情信息
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      timeIcon
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    fields() {
      const platformCategory = this.detailInfo.platformCategory;
      const platformTypeName = this.detailInfo.platformTypeName;
      return accountAllField.filter(i => {
        return !i.platformCategory && !i.platform || i.platformCategory && i.platformCategory.includes(platformCategory) || i.platform && i.platform.includes(platformTypeName);
      });
    },
    showPickTime() {
      return PICK_PLATFORM.includes(this.detailInfo.platformTypeName);
    }
  },
  methods: {
    getData(field) {
      const value = this.detailInfo[field.parentKey] ? this.detailInfo[field.parentKey][field.keyword] : '';
      return field.filterFn ? field.filterFn(value) : value;
    }
  }
};
</script>
<style lang="scss" scoped>
  .pick-time {
    display: flex;
    align-items: center;
    background: #FAFAFC;
    padding: 6px 8px;
    font-size: 12px;
    margin-left: 8px;
    border-radius: 4px;
    color: #999999;
    img {
      width: 14px;
      height: 14px;
      margin-right: 4px;
    }
    .text {
      color: #5F77C3;
      font-size: 14px;
      font-weight: bold;
    }
  }
</style>
